<template>
  <div class="container">
    <!-- 选择偏好 -->
    <van-dialog v-model="likeShow" :show-confirm-button="false">
      <div class="selectLike">
        <h4>选择偏好</h4>
        <van-radio-group class="radio-group d-flex space-center" @change="selectedLike" v-model="radio">
          <van-radio name="0">黄历解读</van-radio>
          <van-radio name="1">星座运势</van-radio>
        </van-radio-group>
        <van-button type="danger" @click="confirmLike" size="large">确定</van-button>
      </div>
    </van-dialog>
    <div v-show="ifShow">
      <luck @changeShow="changeCon"></luck>
    </div>
    <!-- <luck @changeShow="changeCon"></luck> -->
    <div v-show="!ifShow">
      <constellation @changeShow="changeLottery"></constellation>
    </div>
     <div style="padding: 0 10px;position:relative;top: 20px;height: 220px;" id="buttomAD">
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import Tabbar from '@/components/Tabbar'
import Luck from '@/components/Luck'
import Constellation from '@/components/Constellation'

export default {
  components: {
    Tabbar,
    Luck,
    Constellation
  },
  data () {
    return {
      likeType: '0', // 偏好类型
      likeShow: true, // 偏好显隐
      ifShow: true, // 显示黄历或者星座
      num: 0, // 判断是否直接点击确认
      skipNum: 0,
      radio: '0'
    }
  },
  created () {
    this.likeShow = !localStorage.getItem('likeType')
    this.ifShow = localStorage.getItem('likeType') === '0'
    _czc.push(['_trackEvent', 'fate_click'])
  },
  mounted() {
    let adDiv=document.getElementById("buttomAD")
    let scriptDom = document.createElement('script')
    scriptDom.type = 'text/javascript'
    scriptDom.src = 'https://www.smucdn.com/smu0/o.js'
    scriptDom.setAttribute('smua', 'd=m&s=b&u=u3732176&h=210')
    adDiv.appendChild(scriptDom)
  },
  activated () {
    this.ifShow = localStorage.getItem('likeType') === '0'
  },
  methods: {
    // 关闭偏好弹框
    closeLike () {
      this.likeShow = false
    },
    // 选择偏好
    selectedLike (e) {
      this.likeType = e
      this.num++
    },
    // 确定偏好
    confirmLike () {
      this.likeShow = false
      this.ifShow = this.likeType === '0'
      localStorage.setItem('likeType', this.likeType)
      _czc.push(['_trackEvent', 'fate_select_click', this.likeType])
    },
    // 切换到显示星座
    changeCon (val) {
      this.ifShow = val
    },
    // 切换到显示黄历
    changeLottery (val) {
      this.ifShow = val
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  .selectLike {
    text-align: center;
    padding: 0 10px;
    h4 {
      margin: 10px 0;
      font-size: 18px;
      font-weight: bold;
    }
    button {
      margin: 10px 0;
    }
  }
}
</style>
